<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
<div id="app">
    <div v-bind:style="[styleObject1, styleObject2]">数组语法</div>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const vm = Vue.createApp({
        // 该函数返回数据对象
        data() {
            return {
                styleObject1: {
                    color: 'red',  // 字体颜色
                    fontSize: '40px'  // 字体大小
                }
            }
        },

        // 计算属性
        computed: {
            styleObject2: function() {
                return {
                    border: '1px solid red',  // 边框
                    padding: '30px',  // 内边距
                    textAlign: 'center' // 对齐方式
                }
            }
        }
    // 在指定的DOM元素上装载应用程序实例的根组件
    }).mount('#app');
</script>

</body>
</html>
